<template>
  <div>
    <h2>{{ person.name }}</h2>
    <button @click="changePerson">change</button>
  </div>
</template>

<script>
import {watch, reactive, ref } from 'vue'
export default {
  setup () {
    const person=reactive({
      name:'红红',
      age:18
    })

    const name=ref('张三')

    const changePerson=()=>{
      // person.name='酱紫'
        // name.value='酱紫'
        // info.value='酱紫'
         person.name='酱紫'

    }


    //传入一个getter函数
    // watch(()=>{
    //   return person.name},
    //   (newVal,oldVal)=>{
    //   console.log(`newVal:${newVal},oldVal:${oldVal}`);
    // }
    // )

    // 情况一
    // watch(()=>{
    //   return{...person}
    //   // person 如果person前面没有()=>是这样就newVAl和oldVal就是都一样的
    // },(newVal,oldVal)=>{
    //   console.log(`newVal:${JSON.stringify(newVal)},oldVal:${JSON.stringify(oldVal)}`);
    // })

    // 情况二
    // let name=ref('张三')
  //   let info=ref({name:'张三',
  // age:18})
  //   watch(()=>{return {...info.value}},
  //   (newVal,oldVal)=>{
  //       console.log(`newVal:${newVal},oldVal:${oldVal}`);
  //   })


  // 同时监听多个数据
  watch([()=>({...person}),name],([newPerson,newName],[oldPerson,oldName])=>{
    console.log(newPerson,newName);
    console.log(oldPerson,oldName);
  })

    return {
      person,
      changePerson
    }
  }
}
</script>

<style lang="scss" scoped>

</style>